import React,{useMemo} from 'react'
import {useLocation,useNavigate} from 'react-router-dom'
import {Breadcrumb} from 'antd'
import { getOverflowOptions } from 'antd/es/_util/placements'

export default function MyBreadcrumb() {
  const nav=useNavigate()
  const location=useLocation()

  const breadcrumbData={
    '/':[{title:'系统主页',path:'/'}],
    '/home/user':[{title:'系统主页',path:'/'},{title:'系统管理',path:'/home/user'},{title:'用户管理',path:'/home/user'}],
    '/home/role':[{title:'系统主页',path:'/'},{title:'系统管理',path:'/home/user'},{title:'角色管理',path:'/home/role'}],
    '/home/product/list':[{title:'系统主页',path:'/'},{title:'商品管理',path:'/home/product/list'},{title:'商品列表',path:'/home/product/list'}],
    '/home/product/update':[{title:'系统主页',path:'/'},{title:'商品管理',path:'/home/product/list'},{title:'修改商品',path:'/home/product/update'}]
  }
  let pathname=location.pathname
  const breadcrumbTitleAry=useMemo(()=>{
    console.log('pathname',pathname);
    if(/[a-z0-9]{24}/.test(pathname)){
       pathname=pathname.substring(0,pathname.lastIndexOf('/'))
    }
    const breadcrumbAry=breadcrumbData[pathname]
    if(breadcrumbAry){
        return breadcrumbAry
    }else{
        return []
    }
  },[pathname])
  const go=(path)=>{
    nav(path)
  }
  return (
    <div>
        <Breadcrumb>
           {
             breadcrumbTitleAry.map((item,index)=><Breadcrumb.Item key={index} onClick={()=>{go(item.path)}}>{item.title}</Breadcrumb.Item>)
           }
        </Breadcrumb>
    </div>
  )
}
